<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>

    // (1) 创建http请求  => 通过构造函数创建
    var xhr = new XMLHttpRequest();
    console.log(xhr);
    console.log(xhr.readyState); // 0

    // (2) 配置请求相关的信息 
    // xhr.open(type,url,async);
    // type 请求方式(get/post)
    // url  请求的地址(一般是后端接口地址,同服务器下的文本文件也可以(get))
    // async 是否异步(默认true => 异步, false=>已被浏览器弃用,不建议使用)
    // xhr.open("get","../data/1.txt",true);
    xhr.open("get","../data/1.css",true);
    // xhr.open("get","../data/1.js",true);
    // xhr.open("get","../data/1.html",true);

    // xhr.open("get","../data/1.json",true);
    console.log(xhr.readyState); // 1  配置后,发送前


    // (3) 发送请求
    xhr.send();
    console.log(xhr.readyState); // 1  (请求发送后不会立即被服务端接收)


    // 服务端(后端),接收请求,处理请求, 返回响应 => 需要时间
    // (4) 监听请求的状态(了解当前请求到了哪一步)  

    // onreadystatechange事件在加载时只做绑定, 等xhr.readyState改变时才会触发
    // onreadystatechange 监听到xhr.readyState改变时才会触发!!
    xhr.onreadystatechange = function(){ 
        console.log("xhr.readyState改变了",xhr.readyState);

        // xhr.readyState == 4  请求有结果,服务端返回响应
        // xhr.status == 200    响应的结果也是成功的
        if(xhr.readyState == 4 && xhr.status == 200)    {

            // (5) 获取响应数据
            var result = xhr.responseText;
            console.log("响应结果:",result);
            console.log("响应结果:",typeof result);

            // 选择使用 
            result = JSON.parse(result);
            console.log(result);

        }
    }

    // 注意:
    // (1) 后端返回的数据类型可能是 text/html/css/js/json(字符串)
    // (2) 如果返回的数据是json字符串 => 需要通过JSON.parse()解析为数组或对象才能使用 
    // (3) 如果返回的数据不是json字符串 => JSON.parse()解析后会报错

    console.log("同步代码:76 页面加载完毕");





</script>
</html>